import React from "react";
import {inject, observer} from "mobx-react";
import {toJS} from "mobx";
import {Route, withRouter} from "react-router-dom";
import {Bubble, Icon, InputItem, List, TextareaItem, Tools} from "weaver-mobile";
import {RouteLayout} from "weaver-mobile-page";
import {WrCardList} from "../../../public";
import DetailEdit from "./detailEdit";
import querystring from "querystring";

const getLabel = Tools.getLabel;

/**
 * 考核方案指标模板-详情
 * jiansong 2019/11/8
 */
@inject("programItemStore")
@withRouter
@observer
export default class Detail extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            path: this.props.location.pathname
        };
        this.store = this.props.programItemStore;
    }

    componentWillMount() {
        let search = this.props.location.search.replace("?", "");
        let parse = querystring.parse(search);
        if (this.store.canadd) {
            this.store.loading = false;
            this.store.canedit = true;
        }
        if (parse.id) {
            this.store.getItemDetail(parse.id);
        }
    }

    render() {
        const {loading, canedit, onFormChange, form: {id, name, description, assessDetailData}} = this.store;
        return (
            <div>
                <div className="workrelate-performance-programItem" style={{height: window.innerHeight - 50}}>
                    <List>
                        <List.FormItem
                            label={"模板名称"}
                            noBorder
                            line
                            required={name == ""}
                            extra={canedit && <Icon type="editor" size={"xxs"}/>}
                            content={canedit ? <InputItem
                                value={name}
                                placeholder={getLabel(83869, "请输入")}
                                onChange={(val) => onFormChange({name: val})}
                            /> : name}
                        />
                    </List>
                    <List>
                        <List.FormItem
                            noBorder
                            label={"模板描述"}
                            line
                            extra={canedit && <Icon type="editor" size={"xxs"}/>}
                            content={
                                canedit ? <TextareaItem
                                    viewattr="3"
                                    escape={"true"}
                                    placeholder={getLabel(83869, "请输入")}
                                    ref={el => this.autoFocusInst = el}
                                    rows={2}
                                    value={description}
                                    onChange={(val) => onFormChange({description: val})}
                                /> : description}
                        />
                    </List>
                    <WrCardList
                        title={""}
                        full
                        // hiddenHeader={!canedit}
                        dataMapList={[{
                            fieldname: "cate",
                            showname: getLabel(455, "分类"),
                        }, {
                            fieldname: "accessitemidspan",
                            showname: getLabel(18085, "指标类型"),
                        }, {
                            fieldname: "description",
                            showname: getLabel(508669, "指标描述"),
                        }, {
                            fieldname: "rate",
                            showname: getLabel(6071, "权重"),
                        }, {
                            fieldname: "target",
                            showname: getLabel(18087, "目标值"),
                        }]}
                        dataList={(assessDetailData instanceof Array) ? toJS(assessDetailData) : []}
                        showAdd={canedit}
                        showDelete={canedit}
                        showCheckBox={canedit}
                        onRowClick={(val) => {
                            canedit && this.props.history.push({
                                pathname: this.state.path + "/target",
                                state: val
                            })
                        }}
                        showDropList={false}
                        onAdd={() => this.props.history.push(this.state.path + "/target")}
                        onDelete={val => onFormChange({assessDetailData: val})}
                    />
                </div>
                <Route
                    key="programView-detailEdit"
                    path={this.state.path + "/target"}
                    render={() => (
                        <RouteLayout>
                            <div className="wm-route-layout">
                                <DetailEdit/>
                            </div>
                        </RouteLayout>
                    )}
                />
                <RouteLayout.ButtonGroup data={this.getButton()}/>
            </div>
        );
    }

    //获取操作按钮
    getButton = () => {
        const {loading, canedit, canadd} = this.store;
        if (loading) {
            return []
        }
        if (!canedit) {
            return [{
                key: "cancel",
                text: "返回",
                onClick: () => {
                    this.store.loading = true
                    this.store.clearForm();
                    this.props.history.go(-1)
                },
                type: "primary",
            }]
        }
        return [{
            key: "cancel",
            text: getLabel(31129, "取消"),
            onClick: () => {
                this.store.clearForm();
                this.props.history.go(-1)
            },
        }, {
            key: "save",
            text: getLabel(30986, "保存"),
            onClick: () => this.handleSave(),
            type: "primary",
        }];
    }


    //保存操作
    handleSave = () => {
        if (this.checkFormParams()) {
            this.store.operation(this.props.updateListData);
            this.props.history.go(-1)
        }
    };

    //校验表单参数
    checkFormParams = () => {
        let {form: {name, assessDetailData}} = this.store;
        if (name == undefined || name == "") {
            Bubble.error("名称不能为空");
            return false;
        }
        if (assessDetailData.some(item => item.accessitemid == undefined || item.accessitemid == '')) {
            Bubble.error(getLabel('509123', '指标类型不能为空！'));
            return false;
        }

        if (assessDetailData.some(item => {
            if (item.itemtype == '2' && (item.target == undefined || item.target === '')) {
                return true;
            } else {
                return false
            }
        })) {
            Bubble.error(getLabel('509124', '定量指标需填写目标值！'));
            return false;
        }

        if (100 != assessDetailData.reduce((sum, item) => sum + Number(item.rate), 0)) {
            Bubble.error(getLabel('509125', '考核项权重设置不正确,权重总和需等于100！'));
            return false;
        }

        if (assessDetailData.some(i =>
            assessDetailData.some(j => i.id != j.id && i.accessitemid == j.accessitemid && i.description === j.description)
        )) {
            Bubble.error(getLabel('509126', '相同指标类型的指标描述不能相同！'));
            return false;
        }
        return true;
    }

}